<template>
  <div style="width: 100%; background-color: #080a1f; padding-bottom: 35px">
    <!-- 主屏 -->
    <div
      style="
        position: absolute;
        color: #fff;
        top: 10%;
        left: 2%;
        cursor: pointer;
      "
    >
      <div
        @click="tabdiveceFn(item)"
        v-for="item in tabdiveceList"
        :key="item.id"
        style="width: 300px"
      >
        <span v-if="item.id == 1" style="margin-right: 20px">
          {{ item.value }}
        </span>
      </div>
    </div>
    <div class="viewport">
      <div class="column">
        <div class="overview panel">
          <div class="inner">
            <div class="item">
              <h4>2,190</h4>
              <span>
                <i class="icon-dot" style="color: #006cff"></i>
                电池总数
              </span>
            </div>
            <div class="item">
              <h4>190</h4>
              <span>
                <i class="icon-dot" style="color: #6acca3"></i>
                季度新增
              </span>
            </div>
            <div class="item">
              <h4>3,001</h4>
              <span>
                <i class="icon-dot" style="color: #6acca3"></i>
                运营电池
              </span>
            </div>
            <div class="item">
              <h4>108</h4>
              <span>
                <i class="icon-dot" style="color: #ed3f35"></i>
                异常电池
              </span>
            </div>
          </div>
        </div>

        <!--监控-->
        <div class="monitor panel">
          <div class="inner">
            <div class="tabs">
              <a href="javascript:;" data-index="0" class="active"
                >故障电池监控</a
              >
              <a href="javascript:;" data-index="1">异常电池监控</a>
            </div>
            <div class="content" style="display: block">
              <div class="head">
                <span class="col">故障时间</span>
                <span class="col">电池地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">北京市昌平西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">广州市番禺区钟村街道力丰工业园厂房2</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">佛山禅城万达广场门口</span>
                    <span class="col">1000003</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">惠州市惠城区古塘坳宝安路10号</span>
                    <span class="col">1000004</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col"
                      >河南省漯河市郾城区金坡线漯河市裴城镇政府裴城镇委</span
                    >
                    <span class="col">1000005</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">浙江省杭州市拱墅区体育场路208号</span>
                    <span class="col">1000006</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col"
                      >台州市天台县326省道中国邮政储蓄银行(洪畴镇支行)</span
                    >
                    <span class="col">1000007</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">浙江省丽水市遂昌县龙谷路365号</span>
                    <span class="col">1000008</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">湖南省长沙市长沙县板仓路123号</span>
                    <span class="col">1000009</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col"
                      >云南省玉溪市红塔区龙马路72号(龙马路与迎春街交叉口中鑫商务楼)</span
                    >
                    <span class="col">1000010</span>
                    <span class="icon-dot"></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content">
              <div class="head">
                <span class="col">异常时间</span>
                <span class="col">电池地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">北京市昌平西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">广州市番禺区钟村街道力丰工业园厂房2</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">佛山禅城万达广场门口</span>
                    <span class="col">1000003</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">惠州市惠城区古塘坳宝安路10号</span>
                    <span class="col">1000004</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col"
                      >河南省漯河市郾城区金坡线漯河市裴城镇政府裴城镇委</span
                    >
                    <span class="col">1000005</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">浙江省杭州市拱墅区体育场路208号</span>
                    <span class="col">1000006</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col"
                      >台州市天台县326省道中国邮政储蓄银行(洪畴镇支行)</span
                    >
                    <span class="col">1000007</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">浙江省丽水市遂昌县龙谷路365号</span>
                    <span class="col">1000008</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col">湖南省长沙市长沙县板仓路123号</span>
                    <span class="col">1000009</span>
                    <span class="icon-dot"></span>
                  </div>
                  <div class="row">
                    <span class="col">20240807</span>
                    <span class="col"
                      >云南省玉溪市红塔区龙马路72号(龙马路与迎春街交叉口中鑫商务楼)</span
                    >
                    <span class="col">1000010</span>
                    <span class="icon-dot"></span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--点位-->
        <div class="point panel">
          <div class="inner">
            <h3>本月电池发货统计</h3>
            <div class="chart">
              <you3 id="home2you3" class="pie" />
              <div class="data">
                <div class="item">
                  <h4>65,242</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    发货总数
                  </span>
                </div>
                <div class="item">
                  <h4>8,624</h4>
                  <span>
                    <i class="icon-dot" style="color: #eacf19"></i>
                    本月新增
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 地图 -->
        <div class="map">
          <h3>
            <span class="icon-cube"></span>
            电池基地发货数据统计
          </h3>
          <div class="chart">
            <map1 class="geo" id="mapq"></map1>
          </div>
        </div>
        <!-- 用户 -->
        <div class="users panel">
          <div class="inner">
            <h3>全国用户总量统计</h3>
            <div class="chart">
              <userchart id="home2user" class="bar" />
              <div class="data">
                <div class="item">
                  <h4>120,899</h4>
                  <span>
                    <i class="icon-dot" style="color: #ed3f35"></i>
                    用户总量
                  </span>
                </div>
                <div class="item">
                  <h4>248</h4>
                  <span>
                    <i class="icon-dot" style="color: #eacf19"></i>
                    本月新增
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="order panel">
          <div class="inner">
            <!-- 筛选 -->
            <div class="filter">
              <a href="javascript:;" data-key="day365" class="active">365天</a>
              <a href="javascript:;" data-key="day90">90天</a>
              <a href="javascript:;" data-key="day30">30天</a>
              <a href="javascript:;" data-key="day1">24小时</a>
            </div>
            <!-- 数据 -->
            <div class="data">
              <div class="item">
                <h4>65,242</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35"></i>
                  订单量
                </span>
              </div>
              <div class="item">
                <h4>9,834</h4>
                <span>
                  <i class="icon-dot" style="color: #eacf19"></i>
                  销售额(万元)
                </span>
              </div>
            </div>
          </div>
        </div>
        <!-- 销售额 -->
        <div class="sales panel">
          <div class="inner">
            <div class="caption">
              <h3>销售额统计</h3>
              <a href="javascript:;" class="active" data-type="year">年</a>
              <a href="javascript:;" data-type="quarter">季</a>
              <a href="javascript:;" data-type="month">月</a>
              <a href="javascript:;" data-type="week">周</a>
            </div>
            <div class="chart">
              <div class="label">单位:万</div>
              <zuo2 id="home2zuo2" class="line" />
            </div>
          </div>
        </div>
        <!-- 渠道 季度 -->
        <div class="wrap">
          <div class="channel panel">
            <div class="inner">
              <h3>渠道分布</h3>
              <div class="data">
                <div class="item">
                  <h4>39 <small>%</small></h4>
                  <span>
                    <i class="icon-plane"></i>
                    快递站
                  </span>
                </div>
                <div class="item">
                  <h4>28 <small>%</small></h4>
                  <span>
                    <i class="icon-bag"></i>
                    顺丰
                  </span>
                </div>
              </div>
              <div class="data">
                <div class="item">
                  <h4>20 <small>%</small></h4>
                  <span>
                    <i class="icon-train"></i>
                    美团
                  </span>
                </div>
                <div class="item">
                  <h4>13 <small>%</small></h4>
                  <span>
                    <i class="icon-bus"></i>
                    企业
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="quarter panel">
            <div class="inner">
              <h3>一季度销售进度</h3>
              <div class="chart">
                <div class="data">
                  <div class="item">
                    <h4>1,321</h4>
                    <span>
                      <i class="icon-dot" style="color: #6acca3"></i>
                      销售额(万元)
                    </span>
                  </div>
                  <div class="item">
                    <h4>9852</h4>
                    <span>
                      <i class="icon-dot" style="color: #6acca3"></i>
                      订单数
                    </span>
                  </div>
                </div>
                <div class="data">
                  <div class="item">
                    <h4>50%</h4>
                    <span>
                      <i class="icon-dot" style="color: #ed3f35"></i>
                      环比增长
                    </span>
                  </div>
                  <div class="item">
                    <h4>150%</h4>
                    <span>
                      <i class="icon-dot" style="color: #ed3f35"></i>
                      同比增长
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 排行榜 -->
        <div class="top panel">
          <div class="inner">
            <div class="all">
              <h3>全国热榜</h3>
              <ul>
                <li>
                  <i class="icon-cup1" style="color: #d93f36"></i>
                  顺丰
                </li>
                <li>
                  <i class="icon-cup2" style="color: #68d8fe"></i>
                  菜鸟驿站
                </li>
                <li>
                  <i class="icon-cup3" style="color: #4c9bfd"></i>
                  美团
                </li>
              </ul>
            </div>
            <div class="province">
              <h3>各省热销 <i class="date">// 近30日 //</i></h3>
              <div class="data">
                <ul class="sup">
                  <li>
                    <span>北京</span>
                    <span>25,179 <s class="icon-up"></s></span>
                  </li>
                  <li>
                    <span>河北</span>
                    <span>23,252 <s class="icon-down"></s></span>
                  </li>
                  <li>
                    <span>上海</span>
                    <span>20,760 <s class="icon-up"></s></span>
                  </li>
                  <li>
                    <span>江苏</span>
                    <span>23,252 <s class="icon-down"></s></span>
                  </li>
                  <li>
                    <span>山东</span>
                    <span>20,760 <s class="icon-up"></s></span>
                  </li>
                </ul>
                <ul class="sub">
                  <li>
                    <span>数据</span><span> 数据<s class="icon-up"></s></span>
                  </li>
                  <li>
                    <span>数据</span><span> 数据<s class="icon-up"></s></span>
                  </li>
                  <li>
                    <span>数据</span><span> 数据<s class="icon-up"></s></span>
                  </li>
                  <li>
                    <span>数据</span><span> 数据<s class="icon-up"></s></span>
                  </li>
                  <li>
                    <span>数据</span><span> 数据<s class="icon-up"></s></span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { urlObj } from "@/api/login";
import userchart from "@/components/home2/user";
import you3 from "@/components/home2/you3";
import zuo2 from "@/components/home2/zuo2";
import zuo32 from "@/components/home2/zuo32";
import zuo4 from "@/components/home2/zuo4";
import map1 from "@/components/home2/map";
export default {
  components: {
    userchart,
    you3,
    zuo2,
    zuo32,
    zuo4,
    map1,
  },
  data() {
    return {
      tabdiveceList: [
        { value: "主屏", id: 1 },
        { value: "副屏", id: 2 },
      ],
      windowWidth: window.innerWidth, //拿到显示器宽度
      you4list: [
        { name: "可爱多", num: "9,086" },
        { name: "娃哈哈", num: "8,341" },
        { name: "喜之郎", num: "7,407" },
        { name: "八喜", num: "6,080" },
        { name: "小洋人", num: "6,724" },
        { name: "好多鱼", num: "2,170" },
      ],
    };
  },
  computed: {
    // 计算显示器宽度，如果是多少多少宽，字体大小就会多少
    fontSize() {
      let width = this.windowWidth;
      if (width < 1024) width = 1024;
      if (width > 1920) width = 1920;
      return `${width / 80}px`;
    },
  },
  watch: {
    windowWidth(newVal) {
      this.updateFontSize();
    },
  },
  created() {
    this.updateFontSize();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    // 返回主屏
    tabdiveceFn(item) {
      if (item.id == 1) {
        // this.$router.push({
        //   path: "/home",
        // });
        this.$router.go(-1);
      }
    },
    // 赋值 数据大屏的字体会根据显示器宽度计算字体大小
    updateFontSize() {
      document.documentElement.style.fontSize = this.fontSize;
    },
    handleResize() {
      this.windowWidth = window.innerWidth;
    },
  },
};
</script>

<style scoped lang="scss">
/* 导入或直接编写样式 */
@import "../../public/css/home2";
</style>
